
$stepsWidth: 100px;
$headerHeight: 150px;
$footerHeight: 60px;

.page-card {
  .get-started {
    width: 100%;
    height: calc(100vh - 50px - 40px - 30px - 40px);
    display: flex;

    .select {
      width: 100%;
      height: 100%;

      .select-tips {
        width: 100%;
        height: 100px;
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .select-type {
        width: 100%;
        height: calc(100% - 100px);
        display: flex;
        align-items: center;
        justify-content: space-evenly;

        &>div {
          width: 220px;
          height: 220px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid Red;
          border-radius: 6px;
        }
      }
    }

    .left {
      width: 33%;
      height: 100%;
      background: #efefef;
    }

    .right {
      width: 100%;
      height: 100%;
      padding: 0 20px;
      display: flex;

      .content {
        width: calc(100% - 100px);

        &-header {
          height: $headerHeight;
          border-bottom: 1px solid #dedede;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;

          &-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 24px;

            &-text {
              font-size: 1.1em;
              font-weight: bold;
            }

            &-icon {
              cursor: pointer;
              font-size: 22px;
            }
          }

          &-tips {
            max-height: ($headerHeight - 24px);
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            word-break: normal;
          }
        }

        &-body {
          height: calc(100% - 210px);
          padding: 20px 0;
          overflow: auto;
        }

        &-footer {
          height: $footerHeight;
          border-top: 1px solid #dedede;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }

      .steps {
        width: $stepsWidth;
        // background: #efefef;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        padding: 20px 0;
      }
    }
  }
}
